
<template>
  <div class="realTimeWeighing">
    <div>
      <div class="toptie">
        <div class="toptielies">{{poundValue}}&nbsp;<span style="font-size: 20px;line-height: 20px;">KG</span></div>
      </div>
      <div style="margin-bottom:10px">
        <div style="margin:5px 0 5px 5%">过磅信息</div>
        <div class="fromlets">
          <!-- <van-form :model="FormData" @submit="Onsubmitfrom"> -->
          <van-form :model="FormData" ref="formRef">
            <van-cell-group inset>
              <div class="fromlet">
                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="12">磅单编号</van-col>
                  <van-col span="11">订单编号</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="12">
                    <van-field :disabled="true" v-model="FormData.poundNumber" placeholder="" />
                  </van-col>
                  <van-col span="12">
                    <van-field maxlength="12" v-model="FormData.orderNumber" placeholder="" />
                  </van-col>
                </van-row>

                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="12">订单类型</van-col>
                  <van-col span="11">车牌号</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="12">
                    <van-field :disabled="(route.query.code == 'details'||detiladata.code=='200')" v-model="result" is-link readonly name="picker" placeholder="请选择订单类型" @click="onopente" :rules="[{ required: true, message: '请选择订单类型' }]" />
                    <van-popup v-model:show="showPicker" position="bottom">
                      <van-picker :columns="columns" value-key="name" @confirm="onConfirm" @cancel="showPicker = false" />
                    </van-popup>
                  </van-col>
                  <van-col span="12">
                    <van-field @blur="bechange" maxlength="8" v-model="FormData.carNumber" placeholder="" :rules="[{ required: true, message: '请填写车牌号' }]" />
                  </van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="12">物料名称</van-col>
                  <van-col span="11">物料规格</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="12">
                    <van-field maxlength="12" v-model="FormData.matterName" placeholder="" :rules="[{ required: true, message: '请填写物料名称' }]" />
                  </van-col>
                  <!-- <van-col span="12">
                    <van-field v-model="realpt" is-link readonly name="picker" placeholder="请选择物料" @click="onopen1" :rules="[{ required: true, message: '请选择物料' }]" />
                    <van-popup v-model:show="showPicker1" position="bottom">
                      <van-picker :columns="materialInfoList" value-key="fname" @confirm="onConfirm1" @cancel="showPicker1 = false" />
                    </van-popup>
                  </van-col> -->
                  <van-col span="12">
                    <van-field maxlength="9" v-model="FormData.matterModel" placeholder="" />
                  </van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="12">毛重</van-col>
                  <van-col span="11">皮重</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="12">
                    <!-- :disabled="true" -->
                    <van-field maxlength="8" type="digit" v-model="FormData.goodsTotal" name="validator" placeholder="" :rules="[{ validator, message: '毛重必须大于0!' }]" />
                  </van-col>
                  <van-col span="12">
                    <van-field maxlength="8" type="digit" v-model="FormData.goodsTare" name="validatormsg" placeholder="" :rules="[{ validator:validatormsg, message: '皮重必须大于0!' }]" />
                  </van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="12">净重</van-col>
                  <van-col span="11">扣杂</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="12">
                    <van-field :disabled="true" type="digit" v-model="ddd" placeholder="" :rules="[{ validator:validatormsgs, message: '净重出现负数,输入据有误！' }]" />
                    <!-- <van-field :disabled="true" type="digit" v-model="FormData.goodsSuttle" placeholder="" /> -->
                  </van-col>
                  <van-col span="12">
                    <van-field maxlength="8" v-model="FormData.coverVaried" type="digit" placeholder="" />
                  </van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="12">
                    <div>{{result=='销售订单'? '客户':'供应商'}}</div>
                  </van-col>
                  <van-col span="11">对方送货数量</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="12">
                    <van-field maxlength="15" v-model="FormData.customName" placeholder="" :rules="[{ required: true, message: '请填写客户/供应商' }]" />
                  </van-col>
                  <van-col span="12">
                    <van-field maxlength="8" v-model="FormData.orderFqty" type="digit" placeholder="" />
                  </van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="1"></van-col>
                  <van-col span="21">备注</van-col>
                </van-row>
                <van-row gutter="1">
                  <van-col span="24">
                    <van-field v-model="FormData.remark" type="textarea" maxlength="50" placeholder="" show-word-limit />
                  </van-col>
                </van-row>
              </div>
            </van-cell-group>
            <!-- 按钮 -->
            <div class="botbox">
              <van-button v-if="route.query.code == 'details'||detiladata.code=='200'" class="submit-btn" type="primary" @click="submitClick('submit')">结束过磅</van-button>
              <van-button v-else class="save-btn" type="primary" @click="submitClick('save')">保存</van-button>
              <van-button type="primary" plain to="home">返回主页</van-button>
              <van-button class="borbox1" plain type="primary" @click="resetForm">重置</van-button>
            </div>
          </van-form>
          <div>
            <van-button plain v-if="route.query.code == 'details'" style="width:93% !important;" type="primary" to="weighingRecord">返回场内车辆</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import api from "@/api/index.js";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref, reactive, toRefs, computed } from "vue";
export default {
  name: "realTimeWeighing",
  components: {},
  setup() {
    const route = useRoute();
    const router = useRouter();
    let { objs, code } = route.query;
    const result = ref("");
    // const realpt = ref("");
    const showPicker = ref(false);
    const showPicker1 = ref(false);
    const formRef = ref("");
    const data = reactive({
      // 过磅实时显示数字 poundValue
      poundValue: "000000",
      // 品名列表. 下拉框选择品名
      materialInfoList: [],
      isFinite: "",
      columns: [
        { name: "采购订单", key: "1" },
        { name: "销售订单", key: "2" },
        { name: "内部转运单", key: "3" },
      ],
      // 表单数据
      FormData: {
        id: "", //主键
        isCreateItem: 0,
        status: 0, //状态默认为0,只有完成提交的时候,系统改成1,改成1的时候,生成过磅单
        poundNumber: "", //磅单编号
        weighbridgeId: "123456", //地磅ID
        weighbridgeNumber: "456456", //地磅编号
        poundedOrder: 1, //过磅顺序
        transportId: "", //关联货运单号
        AsnBillNo: "", //AsnBillNo单号
        customId: "", //客户id
        customName: "", //供应商名称
        carId: "", //车辆编号
        carNumber: "", //车牌号码
        poundType: 1, //过磅类型
        orderId: "", //订单ID
        orderNumber: "", //订单编号
        orderType: "1", //订单类型
        matterType: "", //物料类型
        matterId: "01ed4c63-bfc1-417e-b15c-54664b22a304", //物料id
        matterName: "", //物料名称
        matterModel: "", //物料规格
        orderFqty: 0, //对方送货重量
        goodsTotal: 0, //货物毛重
        goodsTare: 0, //货物皮重
        goodsSuttle: 0, //净重
        coverVaried: 0, //扣杂
        totalPackage: 0, //包材数量
        packageWeight: null, //包材单件重量
        totalPackageWeight: 0, //包材重量
        takePlace: "", //取货地点
        incomePlace: "", //收货地点
        remark: "", //备注
        sapMoveProjcet: "",
        sapMoveStatus: "",
        sapPurchaseFno: "",
        isSap: "", //跟踪值
      },
      // 场内车辆的参数
      detallData: {},
      // 后台传入的重量类型
      weightEntity: {},
      // 设备信息
      deviceInfo: {
        id: "",
        deviceName: "", //设备名称
        deviceType: "", //设备类型
        deviceChannel: "", //设备归属 EAS 或 SAP
        deviceSerialno: "", //设备编号
      },
      detiladata: {},
    });

    const methods = reactive({
      // 通过车牌号查询数据
      async bechange() {
        console.log("我查的车牌为", data.FormData.carNumber);
        //获取订单类型
        let orderType = data.FormData.orderType;
        let carNo = data.FormData.carNumber;
        // 如果订单类型是 3;内部转运单的话,强制设置过磅类型为1;正常过磅
        if (orderType == 3) data.FormData.poundType = 1;
        console.log(carNo);
        if (carNo == "" || carNo == null) return;
        //先判断车牌号是否不为空,那么先去查询车牌有没有上一次的记录
        if (carNo != null && carNo != "") {
          const res = await api.getUpPoundRecord(`carNumber=${carNo}`);
          console.log(res, carNo);
          if (res && res.code === 200) {
            console.log(res, "查到的数据");
            data.detiladata = res;
            console.log(data.detiladata.code, "成功的端口");
            Notify({ type: "success", message: "车牌号查询成功" });
            //如果查到了, 那么以这次数据为准, 不再继续往下执行了
            const datafrom = res.data;
            //设置数据
            data.FormData.isCreateItem = datafrom.isCreateItem;
            data.FormData.status = datafrom.status;
            //磅单编号有值的时候, 才替换进去
            data.FormData.poundNumber = datafrom.poundNumber;
            data.FormData.poundedOrder = datafrom.poundedOrder + 1; //过磅顺序+1
            data.FormData.transportId = datafrom.transportId; //货运单号
            data.FormData.AsnBillNo = datafrom.asnBillNo;
            data.FormData.customId = datafrom.customId;
            data.FormData.customName = datafrom.customName;
            data.FormData.carId = datafrom.carId;
            data.FormData.carNumber = datafrom.carNumber;
            data.FormData.poundType = datafrom.poundType;
            data.FormData.orderId = datafrom.orderId; //订单编号
            data.FormData.orderNumber = datafrom.orderNumber;
            data.FormData.orderType = datafrom.orderType;
            data.FormData.matterType = datafrom.matterType;
            data.FormData.matterId = datafrom.matterId;
            data.FormData.matterName = datafrom.matterName;
            data.FormData.matterModel = datafrom.matterModel;
            data.FormData.orderFqty = datafrom.orderFqty; //对方送货重量
            data.FormData.remark = datafrom.remark; //对方送货重量
            if (datafrom.orderType == "1") {
              result.value = "采购订单";
            }
            if (datafrom.orderType == "2") {
              result.value = "销售订单";
            }
            if (datafrom.orderType == "3") {
              result.value = "内部转运";
            }
            data.FormData.goodsTotal = datafrom.goodsTotal;
            data.FormData.goodsTare = datafrom.goodsTare;
            data.FormData.goodsSuttle =
              datafrom.goodsTotal - datafrom.goodsTare - datafrom.coverVaried;
            data.FormData.coverVaried = datafrom.coverVaried; //扣杂
            data.FormData.totalPackage = datafrom.totalPackage;
            data.FormData.packageWeight = datafrom.packageWeight; //包材单件重量
            data.FormData.takePlace = datafrom.takePlace;
            data.FormData.incomePlace = datafrom.incomePlace;
            if (
              data.FormData.orderType == 1 &&
              data.FormData.poundedOrder > 2 &&
              data.FormData.poundType === 3
            ) {
              //只针对采购订单
              data.FormData.goodsTotal = datafrom.goodsTare;
              data.FormData.goodsTare = 0;
            } else if (
              data.FormData.orderType == 2 &&
              data.FormData.poundedOrder > 2 &&
              data.FormData.poundType === 3
            ) {
              //只针对销售订单
              data.FormData.goodsTare = datafrom.goodsTotal;
              data.FormData.goodsTotal = 0;
            }
            return;
          } else if (res && res.code == 600) {
            console.log(res, "查到的数据");
            data.detiladata = res;
            console.log(data.detiladata.code, "查不到的端口");
            Notify({ type: "warning", message: "该车牌为本轮首次称重" });
          } else {
            // console.log(res, "111查到的数据");
          }
          // 黑河磅房,此处直接return,后续不再执行
          return;
        }
        if (orderType == "" || orderType == null) {
          console.log(res, "查到的数据");
          data.detiladata = res;
          console.log(data.detiladata.code, "没数据的端口");
          Notify({ type: "warning", message: "请选择订单类型" });
          return;
        }
      },
      //效验函数 毛重
      validator(value) {
        value = Number(value);
        value = data.FormData.goodsTotal;
        // console.log(typeof value, value);
        // // 如果value大于0, 直接通过,不用校验
        if (value > 0) {
          return true;
        }
        // 如果订单类型为 采购订单,第一提交的时候, 毛重必须大于0
        if (data.FormData.orderType == 1) {
          return false;
          // 如果是销售订单类型的话, 在过磅次数大于1的时候, 必须填写毛重
        } else if (
          data.FormData.orderType == 2 &&
          data.FormData.poundedOrder > 1
        ) {
          return false;
        } else if (
          data.FormData.orderType == 3 &&
          data.FormData.poundedOrder > 1
        ) {
          return false;
        } else {
          return true;
        }
      },
      //效验函数 皮重
      validatormsg(value) {
        let val = typeof value == "string" ? Number(value) : value;
        // 如果value大于0, 直接通过,不用校验
        if (val > 0) {
          return true;
        }
        // 如果订单类型为 采购订单,第一提交的时候, 毛重必须大于0
        if (data.FormData.orderType == 2) {
          return false;
          // 如果是销售订单类型的话, 在过磅次数大于1的时候, 必须填写毛重
        } else if (
          data.FormData.orderType == 1 &&
          data.FormData.poundedOrder > 1
        ) {
          return false;
          // 如果是内部转运单的话, 第一次必须填皮重数据大于0
        } else if (data.FormData.orderType == 3) {
          return false;
        } else {
          return true;
        }
      },
      //效验函数 净重
      validatormsgs(value) {
        let val = typeof value == "string" ? Number(value) : value;
        // //第一次过磅 直接通过,不用校验
        // if (data.FormData.status == 0) {
        //   console.log('第一次过磅',val)
        //   return true;
        // }
        // // 第二次判断是否大于0
        // else if (route.query.code == 'details'||detiladata.code=='200') {
        //   console.log('第二次过磅',val)
        //   return false;
        //   // 如果是小于0 报错
        // }else {
        //   return false
        //   // 如果是小于0 报错
        // }
        if (val < 0) {
          console.log(val);
          return false;
        } else {
          return true;
        }
      },

      // 查询所有商品信息
      async queryMaterialInfoAll() {
        let page = {
          pageSize: 100,
          current: 1,
        };
        let params = {};
        const res = await api.queryMaterialInfoAll(page, params);
        if (res.code === 200) {
          let materialInfoList = [];
          for (let i = 0; i < res.data.length; i++) {
            materialInfoList.push(res.data[i].fname);
          }
          data.materialInfoList = materialInfoList;
          // console.log(data.materialInfoList, "拿到列表的数据");
        }
      },
      // 是否展开
      onopente() {
        console.log(data.isFinite);
        if (code == "details" || data.detiladata.code == 200) {
          showPicker.value = false;
        } else {
          showPicker.value = true;
        }
      },
      onopen1() {
        showPicker1.value = true;
      },

      // 订单选择器确认取消
      onConfirm(value) {
        result.value = value.name;
        result.key = value.key;
        data.FormData.orderType = result.key;
        console.log(data.FormData.orderType);
        showPicker.value = false;
      },
      // 物料选择器确认取消
      // onConfirm1(value) {
      //   realpt.value = value;
      //   showPicker1.value = false;
      // },
      // 重置表单
      resetForm() {
        let newFormData = {
          columns: [
            { name: "采购订单", key: "1" },
            { name: "销售订单", key: "2" },
            { name: "内部转运单", key: "3" },
          ],
          id: "", //主键
          isCreateItem: 0,
          status: 0, //状态默认为0,只有完成提交的时候,系统改成1,改成1的时候,生成过磅单
          poundNumber: "", //磅单编号
          weighbridgeId: "123456", //地磅ID
          weighbridgeNumber: "456456", //地磅编号
          poundedOrder: FormData.poundedOrder, //过磅顺序
          transportId: "", //关联货运单号
          AsnBillNo: "", //AsnBillNo单号
          customId: "", //客户id
          customName: "", //供应商名称
          carId: "", //车辆编号
          carNumber: "", //车牌号码
          poundType: 1, //过磅类型
          orderId: "", //订单ID
          orderNumber: "", //订单编号
          orderType: "", //订单类型
          matterType: "", //物料类型
          matterId: "", //物料id
          matterName: "", //物料名称
          matterModel: "", //物料规格
          orderFqty: 0, //对方送货重量
          goodsTotal: 0, //货物毛重
          goodsTare: 0, //货物皮重
          goodsSuttle: 0, //净重
          coverVaried: 0, //扣杂
          totalPackage: 0, //包材数量
          packageWeight: null, //包材单件重量
          totalPackageWeight: 0, //包材重量
          takePlace: "", //取货地点
          incomePlace: "", //收货地点
          remark: "", //备注
          sapMoveProjcet: "",
          sapMoveStatus: "",
          sapPurchaseFno: "",
          isSap: "", //跟踪值
        };
        data.FormData = newFormData;
        result.value = "";
        data.detiladata = {};
        data.detiladata.code = "";
        // realpt.value = "";
        //  formRef.value.resetValidation()
      },
      // 场内车辆方法传参
      recordata() {
        let detallData = objs ? JSON.parse(objs) : {};
        if (code == "details") {
          let {
            poundedOrder,
            poundNumber,
            carNumber,
            orderNumber,
            orderFqty,
            matterName,
            matterModel,
            coverVaried,
            customName,
            remark,
            orderType,
            totalPackage,
            packageWeight,
            goodsTare,
            goodsTotal,
          } = detallData;
          data.FormData.poundedOrder = Number(poundedOrder);
          data.FormData.poundedOrder += 1;
          data.FormData.poundNumber = poundNumber;
          data.FormData.orderNumber = orderNumber;
          data.FormData.carNumber = carNumber;
          data.FormData.orderType = orderType;
          data.FormData.orderFqty = orderFqty;
          data.FormData.totalPackage = totalPackage;
          data.FormData.packageWeight = packageWeight;
          data.FormData.matterName = matterName;
          data.FormData.matterModel = matterModel;
          data.FormData.coverVaried = coverVaried;
          data.FormData.customName = customName;
          data.FormData.remark = remark;
          data.detallData = detallData;
          data.FormData.goodsSuttle = goodsTotal - goodsTare - coverVaried;
          data.FormData.goodsTare = goodsTare;
          data.FormData.goodsTotal = goodsTotal;
          // realpt.value = matterName;
          // 把订单类型回显
          if (detallData.orderType == "1") {
            result.value = "采购订单";
          }
          if (detallData.orderType == "2") {
            result.value = "销售订单";
          }
          if (detallData.orderType == "3") {
            result.value = "内部转运";
          }
        }
        console.log(data.FormData.poundedOrder);
        let darered = "200";
        data.isFinite == darered;
      },
      // 提交
      submitClick(code) {
        console.log(formRef.value);
        formRef.value.validate().then(() => {
          if (code == "submit") {
            console.log(code);
            data.FormData.status = 1;
          }
          if (code == "save") {
            console.log(code);
            data.FormData.status = 0;
          }
          let device = JSON.parse(localStorage.getItem("deviceInfo"));
          console.log(device);
          data.FormData.weighbridgeId = device.id;
          data.FormData.weighbridgeNumber = device.deviceSerialno;
          data.FormData.goodsSuttle = ddd;
          console.log(ddd);
          console.log(data.FormData.goodsSuttle);
          console.log(data.FormData.remark);
          let params = {};
          params = data.FormData;
          console.log(params);
          const res = api.addPassPoundRecord(params);
          console.log(res);
          if (res || (res.code == 200 && data.FormData.goodsSuttle > "0")) {
            // 2. ws.send()给服务器发送信息
            ws.send({
              code: 200,
              msg: data.FormData.carNumber,
              protocol: "carCamera",
            });
            Notify({ type: "success", message: "保存成功" });
            methods.resetForm();
            router.push({
              path: "/Home",
            });
          } else {
            Notify({ type: "warning", message: "提交数据出现错误" });
          }
        });
      },
    });

    let ddd = computed(() => {
      if (data.FormData.goodsTotal > 0 && data.FormData.goodsTare > 0) {
        return (
          data.FormData.goodsTotal -
          data.FormData.goodsTare -
          data.FormData.coverVaried
        );
      }
      else {
        return (data.FormData.goodsSuttle = 0);
      }
    });
    // 1.建立链接 -- 携带cookie参数
    //  let userId = localStorage.getItem("userId");
    let userId = "10502119-20200515-000001-0000004026-021889";
    let poundId = "ee40f6d3-628c-4cbb-8707-d2c969561476";
    let wsUrl = `ws://122.225.12.166:11481/pound`; //嘉兴地址
    // let wsUrl = `ws://122.225.12.166:11473/pound`; //黑河生产环境
    var ws = new WebSocket(`${wsUrl}/deviceWS/${userId}/${poundId}`);
    ws.onopen = () => {};
    // 2. ws.send()给服务器发送信息
    // ws.send();
    // 3.服务器每次返回信息都会执行一次onmessage方法
    ws.onmessage = (e) => {
      // console.log(e);
      // console.log(e.data);
      // console.log(JSON.parse(e.data));
      let { protocol, msg } = e.data ? JSON.parse(e.data) : {};
      if (protocol == "pound") {
        let message = msg ? JSON.parse(msg) : {};
        console.log(message);
        // 实时回显过磅显示
        data.poundValue = message.wsCount;
        // 过磅ID及过磅编号

        // 第一次过磅判断订单类型推入数据
        if (message.wsCount > 0) {
          // if ((FormData.orderType = 1)) {
          //   if (result.value == "采购订单") {
          //     data.FormData.goodsTotal = data.poundValue || 0;
          //     data.FormData.goodsTare = 0;
          //   }
          //   if (result.value == "销售订单") {
          //     data.FormData.goodsTare = data.poundValue || 0;
          //     data.FormData.goodsTare = 0;
          //   }
          //   if (result.value == "内部转运单") {
          //     data.FormData.goodsTare = data.poundValue || 0;
          //     data.FormData.goodsTotal = 0;
          //   }
          // }
          // 第二次过磅判断订单类型推入数据
          // console.log(FormData.orderType, 23456);
          // if (FormData.orderType > 1 && message.wsCount > 1) {
          //   if (detallData.orderType == "1") {
          //     console.log("我走的是采购订单，把当前过磅的值给皮重");
          //     data.FormData.goodsTare = data.poundValue;
          //   }
          //   if (detallData.orderType == "2") {
          //     data.FormData.goodsTotal = data.poundValue;
          //   }
          //   if (detallData.orderType == "3") {
          //     data.FormData.goodsTotal = data.poundValue;
          //   }
          // }
          if (data.FormData.orderType === 2) {
            // 如果是销售订单的话
            if (data.FormData.poundedOrder <= 1) {
              data.FormData.goodsTare = message.wsCount;
            } else {
              // 销售订单, 过磅顺序大于1次的时候,改变毛重重量
              data.FormData.goodsTotal = message.wsCount;
            }
          } else {
            // 如果订单类型是采购订单 或 内部转运单
            if (data.FormData.poundedOrder <= 1) {
              data.FormData.goodsTotal = message.wsCount;
            } else {
              data.FormData.goodsTare = message.wsCount;
            }
          }
        }
      } else {
        console.log(msg, "连接成功,测试发送消息!");
      }
    };

    onMounted(() => {
      //  ws.close();
      methods.queryMaterialInfoAll();
      methods.recordata();
    });

    return {
      route,
      router,
      // isclick,
      showPicker,
      showPicker1,
      ddd,
      result,
      // realpt,
      formRef,
      ...toRefs(data),
      ...methods,
      // validator
    };
  },
};
</script>

<style lang="less" scoped>
.realTimeWeighing {
  margin: 0 auto;
  .toptie {
    width: 100vw;
    height: 180px;
    background: linear-gradient(
      180deg,
      #466bb4 0%,
      rgba(70, 107, 180, 0.6) 82%,
      rgba(70, 107, 181, 0) 100%
    );
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .toptielies {
      line-height: 80px;
      font-size: 48px;
      font-family: D-DIN-Regular, D-DIN;
      font-weight: 400;
      color: #ffffff;
      line-height: 64px;
    }
  }
  .line {
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #5a6073;
    line-height: 18px;
  }
  .rightline {
    color: #9ea5bb;
  }
  .fromlet {
    font-size: 13px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #5a6073;
    .botbox {
      width: 96vw;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .borbox1 {
        text-align: right;
      }
    }
  }
}

::v-deep.van-field__body {
  .van-field__control {
    border: 1px solid #e8e8f3 !important;
  }
}
</style>
